<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>搜索建议</title>
    <style>
        span {
            color: red;
            font-weight: 700;
        }
    </style>
</head>

<body>
    <input type="text" placeholder="输入关键字">
    <ul>

    </ul>
</body>
<script>

    var SearchList = [
        '你好', '我不好', '今天天气不好', '明天吃什么', '你说什么', '你不想学习？'
    ];

    var newList = []

    $("input").oninput = function () {
        newList = []
        if ($("input").value.length != 0) {
            SearchList.forEach(function (v) {
                if (v.includes($("input").value)) {
                    let newText = v.replaceAll($("input").value, `<span>${$("input").value}</span>`)
                    newList.push(newText)
                }
            })
            renderList()
        } else {
            $("ul").innerHTML = ""
        }

    }

    function renderList() {
        $("ul").innerHTML = ""
        newList.forEach(function (item) {
            $("ul").innerHTML += `<li>${item}</li>`
        })
    }

    function $(className) {
        return document.querySelector(className);
    }

    function _(className) {
        return document.querySelectorAll(className);
    }
</script>

</html>